<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的诉求</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-scroll, .mui-segmented-control.mui-scroll-wrapper{
				box-shadow:20px -18px 20px 8px #555;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			/*头部*/
			.mui-bar-nav{z-index:3;}
			.mui-title .arr{width:.2rem;height:.2rem;display:block;background:url(../../images/work/arrow_gray01.png) no-repeat;position:absolute;bottom:.3rem;right:1.8rem;}
			/*菜单*/
			.mui-bar-nav~.mui-content{padding:0;position:absolute;left:0;top:45px;overflow:hidden;}
			.bg_blue{background:#f8c96f;}
			.bg_blue01{background:#79c3f7;}
			.bg_green{background:#60e9e1;}
			.navigate_img{width:.43rem;height:.43rem;display:block;border-radius:.04rem;float:left;margin-right:.13rem;margin-top:.01rem;}
			.navigate_img>img{width:.25rem !important;margin:0.09rem 0 0 0.09rem;}
			.mui-table-view .mui-media-body{width:6.2rem;float:left;overflow:visible;}
			.mui-table-view .mui-media-body>div{width:100%;float:left;}
			.mui-table-view .mui-media-body .body_view{font-size:.3rem;}
			.mui-table-view .mui-media-body .body_view>span,.mui-table-view .mui-media-body .mui-ellipsis>span{float:left;width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
			.mui-table-view .mui-media-body .work_time{color:#b0b0b0;font-size:.24rem;}
			.mui-table-view .mui-media-body .mui-ellipsis{color:#666;font-size:.24rem;overflow:visible;}
			.mui-table-view-cells{padding:0;margin-bottom:.15rem;background:#fff;position:sticky;z-index: -10;}
			.mui-media-box{padding:.38rem 0 0 .38rem;float:left;}
			.mui-table-view .mui-media-right{float:right;width:1.1rem;position:relative;height:100%;}
			.mui-table-view .icon-more{width:.45rem;float:right;height:.45rem;position:relative;background:url(../../images/work/icon-gd-@2x.png) no-repeat;background-size:100% 100%;}
			.mui-table-view .icon-more>img{margin-top:-.03rem;}
			.mui-table-view-cells>a:not(.mui-btn){margin:0;padding:0;}
			.mui-table-view .zhuangtai{width:1.68rem;float:right;text-align:right;font-size:.28rem;margin-top:-.07rem;overflow:hidden;}
			.mui-push-right:after{content:"";}
			.mui-table-view-cells:after{height:0;}
			.evaluate{width:100%;border-top:1px solid #ececec;height:.6rem;line-height:.6rem;font-size:.26rem;color:#666;text-align:center;margin-top:.3rem !important;float:left;}
			.mui-table-view{background:none;position:sticky;}
			.mui-slider{position:absolute;height:100%;z-index:1;width:100%;}
			.mui-slider .mui-slider-group{position: absolute; top:.93rem;bottom: 0;width: 100%;height: auto;border-top:1px solid #e2e2e2 !important;}
			.mui-slider .mui-slider-group .mui-slider-item {position: relative;display: inline-block;width: 100%;border-top:none !important;
            height: 100%;vertical-align: top; white-space: normal;}
			/*弹层*/
			.more_message{width:7rem;top:.5rem;background:#fff;border-radius:.06rem;position:absolute;right:.25rem;z-index:5;border:1px solid #e2e2e2;display:none;}
			.more_message .more_message_box{position:relative;width:100%;float:left;padding:.35rem .38rem;box-sizing:border-box;}
			.more_message .more_message_box>i{width:.2rem;height:.2rem;position:absolute;top:-.15rem;right:.15rem;background:url(../../images/work/arrow_up.png) no-repeat;}
			.bg_gray{width:7.5rem;background:rgba(0,0,0,0.3);height:100%;position:fixed;top:-.9rem;z-index:3;right:0;}
			.mui-icon-trash{font-size:.4rem;color:#8c8c8c;float:left;margin-right:.05rem;}
			.message_info{font-size:.28rem;}
            /*menu_new*/
           .mui-segmented-control.mui-scroll-wrapper .mui-scroll,.mui-segmented-control.mui-scroll-wrapper{height:.95rem;background:#fff;}
           .mui-segmented-control.mui-scroll-wrapper .mui-control-item{padding:0;width:2.5rem;height:.95rem;line-height:.95rem;font-size:.32rem;position:relative;color:#666;}
           .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{content: "";width: 1.62rem;position: absolute;bottom:1px;left:.4rem;height:1px;background-color:#333;z-index:100;}
           .mui-segmented-control.mui-scroll-wrapper .mui-control-item:before{content: "";width:1px;position: absolute;bottom:.33rem;right:0;height:.3rem;background-color:#dcdcdc;}
           .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#333;}
           
           
		</style>
	</head>

	<body>
		<!--公共头部-->
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">我的诉求</h1>
		</div>-->
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item0" data-wid="tab-top-subpage-1.html">
							我的咨询
						</a>
						<a class="mui-control-item" href="#item1" data-wid="tab-top-subpage-2.html">
							我的投诉
						</a>
						<a class="mui-control-item" href="#item2" data-wid="tab-top-subpage-3.html">
							我的建议
						</a>
						<a class="mui-control-item" href="#item3" data-wid="tab-top-subpage-4.html">
							我的纠错
						</a>
					</div>
				</div>
				
				<div class="mui-slider-group" id="mui-table-view">
					<div id="item0" class="mui-control-content mui-active mui-slider-item">
						<div id="scroll" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cells mui-media" v-for="sqInfoReg in sqInfoRegList[0]">
										<div class="mui-media-box">
												<span class="navigate_img bg_green">
												<img class="tjfwl" src="../../images/work/icon-dh-@2x.png">
												</span>
												<div class="mui-media-body">
													<div class="body_view">
														<span>{{sqInfoReg.title}}</span>
														<div class="icon-more" :data-guid="sqInfoReg.oid" :id="sqInfoReg.oid" :replyFlag="sqInfoReg.replyFlag" :auditFlag="sqInfoReg.auditFlag"></div>
													</div>
													<div class="work_time">{{sqInfoReg.regTime}}</div>
													<div class='mui-ellipsis'>
														<span>诉求编号：{{sqInfoReg.sqCode}}</span>
														<div class="zhuangtai">{{sqInfoReg.replyStatus}}</div>
													</div>
												</div>
										  </div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				    <div id="item1" class="mui-control-content mui-slider-item">
				      <div id="scroll" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">															
									<li class="mui-table-view-cells mui-media" v-for="sqInfoReg in sqInfoRegList[1]">
										<div class="mui-media-box">
												<span class="navigate_img bg_green">
												<img class="tjfwl" src="../../images/work/icon-dh-@2x.png">
												</span>
												<div class="mui-media-body">
													<div class="body_view">
														<span>{{sqInfoReg.title}}</span>
														<div class="icon-more" :data-guid="sqInfoReg.oid" :id="sqInfoReg.oid" :replyFlag="sqInfoReg.replyFlag" :auditFlag="sqInfoReg.auditFlag"></div>
													</div>
													<div class="work_time">{{sqInfoReg.regTime}}</div>
													<div class='mui-ellipsis'>
														<span>诉求编号：{{sqInfoReg.sqCode}}</span>
														<div class="zhuangtai">{{sqInfoReg.replyStatus}}</div>
													</div>
												</div>
										  </div>
									</li>	
								</ul>
							</div>
						</div>	
				    </div>
				    <div id="item2" class="mui-control-content mui-slider-item">
				    	<div id="scroll" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">															
									<li class="mui-table-view-cells mui-media" v-for="sqInfoReg in sqInfoRegList[2]">
										<div class="mui-media-box">
												<span class="navigate_img bg_green">
												<img class="tjfwl" src="../../images/work/icon-dh-@2x.png">
												</span>
												<div class="mui-media-body">
													<div class="body_view">
														<span>{{sqInfoReg.title}}</span>
														<div class="icon-more" :data-guid="sqInfoReg.oid" :id="sqInfoReg.oid" :replyFlag="sqInfoReg.replyFlag" :auditFlag="sqInfoReg.auditFlag"></div>
													</div>
													<div class="work_time">{{sqInfoReg.regTime}}</div>
													<div class='mui-ellipsis'>
														<span>诉求编号：{{sqInfoReg.sqCode}}</span>
														<div class="zhuangtai">{{sqInfoReg.replyStatus}}</div>
													</div>
												</div>
										  </div>						
									</li>	
								</ul>
							</div>
						</div>
				    </div>
				    <div id="item3" class="mui-control-content mui-slider-item">
				    	<div id="scroll" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">															
									<li class="mui-table-view-cells mui-media" v-for="sqInfoReg in sqInfoRegList[3]">
										<div class="mui-media-box">
												<span class="navigate_img bg_green">
												<img class="tjfwl" src="../../images/work/icon-dh-@2x.png">
												</span>
												<div class="mui-media-body">
													<div class="body_view">
														<span>{{sqInfoReg.title}}</span>
														<div class="icon-more" :data-guid="sqInfoReg.oid" :id="sqInfoReg.oid" :replyFlag="sqInfoReg.replyFlag" :auditFlag="sqInfoReg.auditFlag"></div>
													</div>
													<div class="work_time">{{sqInfoReg.regTime}}</div>
													<div class='mui-ellipsis'>
														<span>诉求编号：{{sqInfoReg.sqCode}}</span>
														<div class="zhuangtai">{{sqInfoReg.replyStatus}}</div>
													</div>
												</div>
										  </div>									    
									</li>	
								</ul>
							</div>
						</div>
				    </div>
				</div>
			</div>
		</div>
		<!--弹层-->
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view" id="middlePopoverUl">
					</ul>
				</div>
			</div>
		</div>
		
		<script>
			function my_immersed(immersed) {}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
	    <script src="../../js/vue.min.js"></script>
		<script>	
			//点击数据弹出操作按钮菜单
			mui('body').on('tap', '[data-guid]', function() {
				var id = this.getAttribute('id');
				var replyFlag = this.getAttribute('replyFlag');
				var auditFlag = this.getAttribute('auditFlag');
				loadMiddlePopoverUl(id,replyFlag,auditFlag);
				mui('#middlePopover').popover('toggle', document.getElementById(id));
			});

			/**
			 * 加载弹出菜单中的参数值
			 * @param {Object} id
			 * @param {Object} bespeakStatus
			 * @param {Object} phoneNum
			 */
			function loadMiddlePopoverUl(id,replyFlag,auditFlag) {
				var tempHtml = '';
				if(replyFlag == '0' && auditFlag == '1'){
					//设置弹出菜单的高度，若高度太低内容太多的话 会遮挡住箭头
					document.getElementById("middlePopover").style.height = 50 * 2 + "px";					
					for(var i = 0; i < 2; i++) {
						var name = "";
						if(i == 0){
							name = "查看详情";
							tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='1'>"+name+"</a></li>";
						}else if(i == 1){
							name = "诉求评价";
							tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='2'>"+name+"</a></li>";
					    }
					 }
				  }else{
				  	  document.getElementById("middlePopover").style.height = 50 + "px";
				      tempHtml += "<li class='mui-table-view-cell'><a id='"+id+"' type='1'>查看详情</a></li>";
				  }
				   document.getElementById("middlePopoverUl").innerHTML = tempHtml;			
			}
			
			mui('#middlePopoverUl').on('tap', 'a', function() {
				var type = this.getAttribute('type');
				var oid = this.getAttribute('id');
				if(type == 1){
				  //查看诉求详细信息
				  showTemplates('../my/my_sq_detail.html','诉求详情','../my/my_sq_detail.html?oid='+oid);
			     //隐藏弹框
			     mui('#middlePopover').popover('hide');	
				}else if(type == 2){
				 //评价诉求信息页面
				  showTemplates('../my/my_sq_evaluate.html','诉求评价','../my/my_sq_evaluate.html?oid='+oid);
				  //隐藏弹框
			      mui('#middlePopover').popover('hide');	
				}
			});
			
			//加载诉求列表信息
			var pageSize = 5;//每页显示的条数
			var maxPageNumbers=[1,1,1,1];//最大页数 maxPageNumbers[0]-我的咨询  maxPageNumbers[1]-我的投诉 maxPageNumbers[2]-我的建议 maxPageNumbers[3]-我的纠错 
			
			var news = new Vue({
				  el: '#mui-table-view',
				  data: {
				  	sqInfoRegList:[[],[],[],[]]
				  }
				  
			});	
		 				      			
			function loadMore(index,phone,pageNumber,pageSize,callback) {
		        //sqType 1-我的咨询  2-我的投诉 3-我的建议 4-我的纠错 (诉求类型为选项卡下标 +1)
		        var sqType = JSON.parse(index) + 1;
		        var param = jsonToParams({
		        	userId: !phone ? getUserId() : '',
		        	phone:phone,
		        	sqType:sqType,
		        	pageNumber:pageNumber,
		        	pageSize:pageSize,
		        	random:Math.random()
		        })
				var url = 'appHttpService/mySq.do';
			    utils.ajax(url, function(data) {
					 callback(data);
				}, param);
				
			};
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					var replyStatusVal = '未回复';
					if(item.replyStatus == '0' && item.auditFlag == '1'){
						replyStatusVal = '已回复';
					}
					newItems.push({
						oid: item.oid,
						title: item.title,
						sqCode: item.sqCode,
						regTime: item.regTime,
						replyFlag: item.replyStatus,
						replyStatus: replyStatusVal,
						auditFlag: item.auditFlag
					});
				});
				return newItems;
			}			
		 	
		    $(function(){
				 $('.mui-bar-nav~.mui-content').height($(window).height()-45+'px')
			});		
		    mui.init();
		    var pages = [0,0,0,0];
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.plusReady(function() {
					var phone = utils.getUrlParam('phone');
										
					//循环初始化所有上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							up: {
								auto:true,
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										/*ul.appendChild(createFragment(ul, index, 5));*/
										var thisPage = pages[index]+1;
										pages[index] = thisPage;
										if(thisPage<=maxPageNumbers[index]){
											loadMore(index,phone,thisPage,pageSize,function (data){
											var data = JSON.parse(data);
											if(data.state == 0 && data.total > 0) {
												if(data.maxPageNumber != undefined){
													 //sqCount 1-我的咨询  2-我的投诉 3-我的建议 4-我的纠错 
													if(data.sqCount == 1){
														maxPageNumbers[0] = data.maxPageNumber;
													}else if(data.sqCount == 2){
														maxPageNumbers[1] = data.maxPageNumber;
													}else if(data.sqCount == 3){
														maxPageNumbers[2] = data.maxPageNumber;
													}else if(data.sqCount == 4){
														maxPageNumbers[3] = data.maxPageNumber;
													}
												}
												if(data.mySqVo != undefined){
													var rows = JSON.parse(data.mySqVo);
													if(rows != null && rows.length > 0){
														news.sqInfoRegList[index] = news.sqInfoRegList[index].concat(convert(rows));	
														Vue.set(news.sqInfoRegList,index, news.sqInfoRegList[index]);	
														
														if(rows.length < pageSize){
															self.endPullUpToRefresh(true);
														}else{
															self.endPullUpToRefresh();
													    }
													}
												}else{
													self.endPullUpToRefresh(true);
												}
											 }else{
											 	self.endPullUpToRefresh(true);
											 }
										   });
										}else{
											self.endPullUpToRefresh(true);
										}
									}, 1000);
								}
							}	
						});
					});
				});
			})(mui);
			
		</script>
	</body>

</html>